<template>
  <div>
    <el-card style="width: 100% ;height: 90% ;margin-top:5%">
      <el-table :data="tableData" style="width: 100%;">
        <el-table-column label="风险学生">
          <template #default="scope">
            <el-link type="warning" style="font-size: 18px;font-weight: bolder;" @click="handleLink(scope.row.studentname)">{{ scope.row.studentname }}</el-link>
            <!-- <div style="display: flex; align-items: center">
              {{ scope.row.studentname }}
            </div> -->
          </template>
        </el-table-column>
        <el-table-column label="班级">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              {{ scope.row.class.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="低Tag值技术">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              {{ scope.row.lowTag.join(' | ') }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script setup>
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router';
const props = defineProps(["data"])
const tableData = ref([])
const router = useRouter()
onMounted(()=>{
  tableData.value = handleData(props.data)
})
const handleLink = (name) => {
  router.push(`/student-manage/studentlist?name=${name}`)
}
const handleData = ({studentData}) => {
  //存放平均值
  const averageStudent = []
  studentData.forEach((item)=>{
    //取出score的value 数据格式为数组
    let values = Object.values(item.score)
    // console.log(values);
    //计算平均值(如果values的值不存在会出现NaN)
    let averageValue = values.reduce((total,item) => total+item,0)/values.length
    // console.log(item);
    //判断是否为NaN，不是就添加数据
    if (!isNaN(averageValue)) {
      //将平均值加入到studentData数组中
      averageStudent.push({
        ...item,
        averageValue
      })
    }
  })
  // console.log(averageStudent);
  //根据平均值从小到大进行排序(影响原数组)
  averageStudent.sort((item1,item2)=>item1.averageValue-item2.averageValue)
  //截取平均值最低的5个人
  const students = averageStudent.slice(0,5)
  //存放最低tag标签
  const finalStudent = []
  students.forEach((item)=>{
    //将item.score转换成数组,再根据平均值排序，再截取前5个,最后再映射成只有tag标签的数组结构
    let lowTag = Object.entries(item.score).sort((item1,item2)=>item1[1]-item2[1]).slice(0,5).map(item=>item[0])
    finalStudent.push({
      ...item,
      lowTag
    })
  })
  return finalStudent
}
</script>
<style scoped lang='scss'>
.el-card {
  // background-color: aqua;
  border-radius: 30px;
  background: url(../../assets/t_bg.png) repeat center;
  background-size: 800px 800px;

.el-table{
  background: url(../../assets/t_bg.png) repeat center;
  background-size: 800px 800px;
  height: 300px;
  border-radius: 30px;
  :deep(tr){
    background: rgba($color: #fff, $alpha: 0) !important;
    color: white;
  }
  :deep(th){
    background: rgba($color: #fff, $alpha: 0) !important;
    color: white;
  }
  :deep(tr):hover td{
    background: rgba($color: #fff, $alpha: 0) !important;
  }
}
  :deep(.el-table .cell) {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
  }
}
// :deep(.el-card__body){
//   background: url(../../assets/t_bg.png) no-repeat center;
//   background-size: 100% 100%;
//   height: 300px;
// }
</style>